<template>
  <div class="container">
    <!-- 精选题库模块 -->
    <el-card class="question-list-card">
      <!-- 新增试题按钮 -->
      <el-button
        class="addquestions-btn"
        type="success"
        icon="el-icon-edit"
        @click="addNewQuestion"
        >新增试题</el-button
      >
      <!-- 筛选区域 -->
      <el-form
        class="question-filtrate"
        ref="formRef"
        :model="form"
        label-width="80px"
      >
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                @change="subjectChange()"
                v-model="form.subjectID"
                placeholder="请选择"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in subjectList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                @change="labelChange"
                v-model="form.catalogID"
                placeholder="请选择"
              >
                <el-option
                  :label="item.directoryName"
                  :value="item.id"
                  v-for="(item, index) in directoryList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  :label="item.tagName"
                  :value="item.id"
                  v-for="(item, index) in tagnameList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="index"
                  v-for="(item, index) in direction"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  :label="item.creator"
                  :value="item.id"
                  v-for="(item, index) in dataList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-col :span="12">
                <el-select
                  @change="cityChange"
                  v-model="form.province"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in provinces"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in citys"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="basicBTN">
            <el-form-item>
              <el-button @click="clearform">清除</el-button>
              <el-button type="primary" @click="searchQuestion">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 标签导航 -->
      <el-tabs v-model="tabsData" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="已审核" name="2"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
      </el-tabs>
      <el-dialog
        append-to-body
        title="题目预览"
        :visible.sync="dialog"
        width="50%"
        @closedialog="this.dialog = false"
      >
        <dialogComponent
          ref="questionsCom"
          :questionType="questionType"
          :previewlist="previewlist"
        ></dialogComponent>
        <el-row class="confirm">
          <el-button class="confirmBtn" type="primary" @click="closedialog"
            >关 闭</el-button
          >
        </el-row>
      </el-dialog>
      <!-- 审核dialog区域 -->
      <checkdialogComponent Component ref="checkQuestionRef" :id="questionId">
      </checkdialogComponent>

      <!-- 全部列表内容 -->
      <div class="data-traffic">
        <i class="el-icon-info font-info"></i>
        <span>数据一共{{ this.dataList.length }}条</span>
      </div>
      <el-table :data="dataList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.questionType == 1">单选</div>
            <div v-else>多选</div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="160">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="140">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.difficulty == 0">简单</div>
            <div v-else-if="scope.row.difficulty == 1">一般</div>
            <div v-else>困难</div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.chkState == 0">待审核</div>
            <div v-else-if="scope.row.chkState == 1" disabled>已审核</div>
            <div v-else>已拒绝</div>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.difficulty == 1">已发布</div>
            <div v-else>未发布</div>
          </template>
        </el-table-column>
        <!-- 操作部分 -->
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="preview(scope.row.questionType, scope.row.id)"
              type="text"
              size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="questionCheck(scope.row.id)"
              :disabled="scope.row.chkState === 1 ? true : false"
              >审核</el-button
            >
            <el-button type="text" size="small" @click="jumpAdd(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="shelves(scope.row.publishState, scope.row.id)"
              >{{ scope.row.publishState === 0 ? '上架' : '下架' }}</el-button
            >
            <!-- <el-button
                  v-show="scope.row.publishState === 1"
                  type="text"
                  size="small"
                  >下架</el-button
                > -->
            <el-button
              @click="setdeleteList(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <!-- 预览dialog区域 -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页模块 -->
      <div class="pagesBack">
        <page-tool
          @pageSizeChange="onPageSizeChange"
          @pageChange="onPageChange"
          :current-page="queryinfo.page"
          :total="total"
          :page-size="queryinfo.pagesize"
        ></page-tool>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getDataList,
  deleteList,
  getSubjectsList,
  getmulu,
  getTogsList,
  getbiaoqian,
  afterSearch
} from '@/api/hmmm/questions'
import { parseTimeByString } from '@/filters'
import PageTool from '@/module-manage/components/page-tool'
import { provinces, citys } from '@/api/hmmm/citys'
import dialogComponent from '@/module-hmmm/components/questions-preview'
import checkdialogComponent from '@/module-hmmm/components/questions-check'
import { createAPI } from '@/utils/request'
export default {
  data() {
    return {
      questionId: null,
      activeName: 'first',
      dataList: [],
      formLists: {},
      subjectList: [],
      directoryList: [],
      tagnameList: [],
      questionType: '',
      previewlist: {},
      form: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      props: {},
      options: [],
      total: 0,
      queryinfo: {
        pagesize: 5,
        page: 1,
        chkState: null
      },
      tabsData: '0',
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      provinces: provinces(),
      citys: [],
      dialog: false
    }
  },
  created() {
    this.loadDataList()
    this.loadSubjectsList()
  },
  components: {
    dialogComponent,
    'page-tool': PageTool,
    checkdialogComponent
  },
  methods: {
    jumpAdd(message) {
      console.log(message)
      this.$router.push({
        name: 'questions-new',
        query: { id: message }
      })
    },
    cityChange(item) {
      this.citys = citys(item)
      console.log(item, 'city')
      console.log(this.provinces, '11111')
    },
    async subjectChange() {
      const { data } = await getmulu({ subjectID: this.form.subject })
      // console.log(data);
      this.directoryList = data.items
    },
    // 获取数据列表
    async loadDataList() {
      console.log(this.queryinfo)
      const { data: res } = await getDataList(this.queryinfo)
      console.log(res)
      this.dataList = res.items
    },
    async subjectChange() {
      this.directoryList = []
      this.form.catalogID = ''
      const { data } = await getmulu({ subjectID: this.form.subjectID })
      console.log(data)
      this.directoryList = data.items
    },
    // 获取标签列表
    async labelChange() {
      this.tagnameList = []
      this.form.tags = ''
      const { data } = await getbiaoqian({ subjectID: this.form.subjectID })
      console.log(data)
      this.tagnameList = data.items
    },
    // 清空表单
    clearform(formRef) {
      this.$refs['formRef'].resetFields()
      this.form.city = ''
      this.loadDataList()
    },
    // 搜索功能
    async searchQuestion() {
      const { data } = await afterSearch({
        subjectID: this.form.subjectID,
        catalogID: this.form.catalogID,
        tags: this.form.tags,
        keyword: this.form.keyword,
        questionType: this.form.questionType,
        difficulty: this.form.difficulty,
        direction: this.form.direction,
        creatorID: this.form.creatorID,
        remarks: this.form.remarks,
        shortName: this.form.shortName,
        province: this.form.province,
        city: this.form.city
      })
      console.log(data)
      this.dataList = data.items
    },
    // 跳转页面
    addNewQuestion() {
      // { path: '/dashboard' }
      this.$router.push({ path: '/questions/new' })
    },
    // 分页功能
    onPageSizeChange(newpagesize) {
      this.queryinfo.pagesize = newpagesize
      this.loadDataList()
    },
    onPageChange(newpagenum) {
      this.queryinfo.page = newpagenum
      this.loadDataList()
    },
    // 点击tab栏发送请求
    handleClick(tab) {
      console.log(tab, '------')
      if (tab.name === '0') {
        this.queryinfo.chkState = null
        this.loadDataList()
      } else if (tab.name === '1') {
        this.queryinfo.chkState = 0
        this.loadDataList()
      } else if (tab.name === '2') {
        this.queryinfo.chkState = 1
        this.loadDataList()
      } else if (tab.name === '3') {
        this.queryinfo.chkState = 2
        this.loadDataList()
      }
    },
    sendNewQuestion() {},
    // 删除功能
    async setdeleteList(id) {
      const resultConfirm = await this.$confirm('确定删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (resultConfirm === 'confirm') {
        await deleteList(id)
        this.loadDataList()
      }
    },
    // 获取学科数据
    async loadSubjectsList() {
      const { data } = await getSubjectsList()
      this.subjectList = data
    },
    // 点击预览打开弹框
    async preview(num, id) {
      this.dialog = true
      this.questionType = num
      const { data } = await createAPI(`/questions/${id}`, 'GET')
      // console.log(data);
      this.previewlist = data

      // console.log(data.videoURL);
    },
    // 关闭弹窗
    closedialog() {
      this.$refs.questionsCom.isvideoshow = false
      this.dialog = false
    },
    // 点击打开审核弹框
    questionCheck(id) {
      this.questionId = id
      console.log(this.questionId, '1111')
      this.$refs.checkQuestionRef.checkdialog = true
    },
    // 弹出框事件
    async open(txt, id, state) {
      const result = await this.$confirm(`你确认${txt}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(result)
      if (result !== 'confirm') {
        this.$message.info('已取消操作')
      } else {
        const { data } = await createAPI(
          `/questions/choice/${id}/${state}`,
          'post'
        )
        console.log(data)
        this.$message.success(`${txt}成功！`)
        this.loadDataList()
      }
    },
    // 上架下架
    shelves(state, id) {
      const params = state === 0 ? '上架' : '下架'
      const papastatus = state === 0 ? 1 : 0
      this.open(params, id, papastatus)
    }
  }
}
</script>

<style scoped lang="less" scoped>
.question-list-card {
  position: relative;
  margin: 20px 14px 14px;
  background-color: #fff;
  .addquestions-btn {
    position: absolute;
    right: 26px;
    width: 120px;
    height: 40px;
  }
  .question-filtrate {
    margin-top: 60px;
  }
  .total {
    width: 1200px;
    height: 44px;
    background-color: #f4f4f5;
    .el-icon-info {
      margin-left: 18px;
      line-height: 44px;
      padding-right: 10px;
    }
  }
  .questionsList {
    margin-top: 22px;
  }
  .basicBTN {
    text-align: right;
  }
}
.container {
  /deep/.addSmsBtn {
    display: flex;
    justify-content: flex-end;
  }
  /deep/.form-search {
    margin-top: 19px;
    .search-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .data-traffic {
    padding: 10px 20px;
    margin-bottom: 12px;
    background-color: #f4f4f5;
    span {
      margin-left: 10px;
      color: #909399;
      font-size: 16px;
    }
    .font-info {
      color: #909399;
      font-size: 18px;
    }
  }
  .pagesBack {
    display: flex;
    justify-content: flex-end;
  }
}
.confirm {
  text-align: center;
}
.pagesBack {
  margin-top: 15px;
}
</style>
